<template>
  <div class="scroll-wrap">
    <div v-if="hasTitle" class="title">
      <div v-for="(item ,index) in titleList" :key="index" class="titleItem">
        {{item.name}}
      </div>
    </div>
    <div class="scrollContent" id="scrollContent"  @mouseenter="Stop()" @mouseleave="Up()">
      <ul class="scrollArea">
        <li v-for="(item ,index) in listData" :key="index" class="scrollItem">
            <div class="index">{{ index + 1}}</div>
            <div v-for="(items ,indexs) in titleList" :key="indexs" class="titleItem">
              {{listData[index][items.property]}}
            </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
export default {
  props: {
    listData: {
      type: Array,
      required: true
    },
    hasTitle: {
      type: Boolean,
      default: false
    },
    titleList: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      activeIndex: 0,
      intnum: null
    }
  },
  watch: {},
  computed: {
    top() {
      return -this.activeIndex * 50 + 'px'
    }
  },
  mounted() {
    this.ScrollUp()
  },
  beforeDestroy() {},
  methods: {
    scrollNews(obj) {
      let $self = obj.find('ul')
      let lineHeight = $self.find('li:first').height()
      //  https://blog.csdn.net/Dreamfirefly/article/details/77709516 该博客介绍了定时器动画切页面后，动画加快的问题以及可能奏效的解决方案
      $self.stop(true, true).animate(
        {
          marginTop: -lineHeight + 'px'
        },
        400,
        function() {
          $self
            .css({
              marginTop: 0
            })
            .find('li:first')
            .appendTo($self)
        }
      )
    },
    ScrollUp() {
      let scrollContent = $('#scrollContent')
      this.intnum = setInterval(() => {
        this.scrollNews(scrollContent)
      }, 1000)
    },
    Stop() {
      clearInterval(this.intnum)
    },
    Up() {
      this.ScrollUp()
    }
  }
}
</script>

<style lang='scss' scoped>
.scroll-wrap {
  width: 940px;
  height: 500px;
  color: #fff;
  border: 1px solid #00b2ff;
  position: relative;
  .title {
    height: 52px;
    line-height: 52px;
    width: 100%;
    background: #082840;
    display: flex;
    .titleItem{
      font-size: 20px;
    }
  }
  .scrollContent {
    position: absolute;
    top: 52px;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    .scrollArea {
      .scrollItem {
        display: flex;
        height: 50px;
        text-align: left;
        .index {
          background-color: #00b2ff;
          font-weight: normal;
          width: 20px;
          height: 20px;
          line-height: 20px;
          vertical-align: middle;
          border-radius: 50%;
          text-align: center;
          margin: 0 5px;
          color: #fff;
        }
      }
    }
  }
}
</style>
